Skip to main content

Просмотр текста страницы

Пожалуйста, ознакомьтесь с Правилами использования материалов на данном ресурсе.

🔗 Оригинальная страница — Источник данного материала

Просмотр текста страницы

Описание​

С помощью данного инструмента Вы легко можете просмотреть исходный код (Source), DOM модель и отображаемый текст загруженной в ❗→ браузерестраницы.

На заметку

В чём разница между DOM и исходным кодом страницы Вы можете прочитать в заметке Разница между Source и DOM

На заметку

Если Вы работаете на движке Chrome, то в качестве альтернативы можете использовать инструменты web-разработчика

Для чего это используется?​

Данный инструмент используется когда нужно более глубже понять структуру страницы:

Как открыть окно?​

Кнопка включения данного окна находится правее адресной строки браузера.

image-20211226-162058

Как работать с окном?​

При клике по иконке открывается окно:

image-20200815-142918

Выбор содержимого​

Тут необходимо выбрать, что Вы хотите просматривать: DOM (по умолчанию), исходный код или видимый текст на странице (❗→ разница между Source и DOM).

Переносить по словам​

При активации данной опции если строка слишком длинная, то она будет перенесена на следующую , а не скрываться за границей окна. В качестве примера скриншот того же окна, но с активной данной опцией:

image-20200815-143611

Копировать в конструктор регулярных выражений​

При клике по данной кнопке будет запущен ❗→ конструктор регулярных выражений, а содержимое окна будет автоматически в него скопировано.

Пример использования​

Представим, что Вам необходимо спарсить тэги <meta> с атрибутом property со страницы темы на форуме ZennoLab. Через ❗→ конструктор действий к ним не подберёшься, т.к. эти тэги никак не отображены. Наши действия:

  • Переходим на необходимую страницу
  • Запускаем окно просмотра кода (конкретно в этом случае можно использовать как DOM так и исходный код, это никак не отразится на итоговом результате) и смотрим на необходимые тэги (их несколько, но тут будет приведён только один):

image-20200815-150735

У всех тэгов одна и та же структура: всегда начинаются с <meta property=" и заканчиваются на > в кавычках, сразу после property, название этого свойства, а в атрибуте content - содержимое.

  • Копируем содержимое в ❗→ конструктор регулярных выражений с помощью одноимённой кнопки. На основе анализа из предыдущего шага создаём регулярку - (?<=<meta\ property=)"([a-z:]+)"\s+content="(.*?)"(?=>)

  • С помощью экшена ❗→ Обработка текста и его действия Regex достаём из кода страницы нужные нам значения и сохраняем в таблицу:

image-20200815-153331

Небольшие пояснения к скриншоту:

  • { -Page.Dom- } - в данной переменной хранится DOM вкладки. Для исходного кода - это { -Page.Source- }, для текста - { -Page.Text- }. В ❗→ окне переменных можно найти и другие.
  • Почему был исключён столбец под номером ноль? В ❗→ регулярном выражении была использована скобочная группировка ( (?<=<meta\ property=)"([a-z:]+)"\s+content="(.*?)"(?=>) - две группы выделены красным ). При тестировании в конструкторе регулярных выражений , перейдя на вкладку Группы, Вы заметите, что было найдено три группы, несмотря на то, что у нас их две: в самой первой группе находится текст полного совпадения, а дальше уже следуют группы, которые были определены. А т.к. нумерация начинается с нуля, мы исключаем именно столбец с номер 0, а не 1.

image-20200815-155656

Полезные ссылки​